<template>
    <div class="workarea">
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose">
            <!-- 新增工区的表单信息 -->
            <el-form ref="form" :rules="rules" :inline="true" :model="form" label-width="80px">
                <el-form-item label="工区名称" prop="wname">
                    <el-input placeholder="请输入工区名称" v-model="form.wname"></el-input>
                </el-form-item>
                <el-form-item label="负责人" prop="sadminId">
                    <el-select size="medium" v-model="form.sadminId" filterable placeholder="请选择" @change="updateSadminName">
                        <el-option v-for="data in staffData" :label="data.sname" :value="data.sid" :key="data.sid"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="负责人id" prop="sadminname">
                    <el-select size="medium" v-model="form.sadminname" filterable placeholder="请选择" @change="updateSadminId">
                        <el-option v-for="data in staffData" :label="data.sid" :value="data.sname" :key="data.sname"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="wstatus">
                    <el-select size="medium" v-model="form.wstatus" placeholder="请选择" >
                        <el-option v-for="data in statusData" :label="data.label" :value="data.value" :key="data.id"/>
                    </el-select>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
        
        <!-- 存放搜索框 -->
        <el-header>    
            <div class="workarea-header">
                <el-button @click="handleAdd" type="primary">
                    + 新增
                </el-button>
                <!-- form搜索区域 -->
                <el-form :inline="true" :model="workAreaForm">
                    <el-form-item>
                        <!-- <el-input placeholder="请输入名称" v-model="workareaForm.name"> -->
                        <el-input placeholder="请输入名称" v-model="name"
                            @keyup.enter.native="onSubmit">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input placeholder="请输入状态" v-model="wstatus"
                            @keyup.enter.native="onSubmit">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-row>
                            <el-button type="primary" @click="onSubmit">查询</el-button>

                            <el-button type="info" @click="resetParam">重置</el-button>
                        </el-row>
                    </el-form-item>
                </el-form>
            </div>
        </el-header>

        <el-main>
            <!-- 存放说明信息，批量删除 -->
            <div>
                <el-row type="flex" class="row-bg">
                    <el-col :span="6"><div class="grid-content bg-purple">工区信息列表</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple">共<span style="color: rgb(17, 101, 101);">{{total}}</span>条记录</div></el-col>
                    <!-- <el-col :span="6"><div class="grid-content bg-purple">共a条记录</div></el-col> -->
                </el-row>
                <el-row type="flex" class="row-bg" justify="end">
                    <el-button type="danger" @click="batchDelete">批量删除</el-button>
                </el-row>
            </div>
            <div class="common-table">
                <!-- 存放表格 -->
                <el-table
                    stripe
                    :data="tableData"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="50">
                    </el-table-column>
                    <el-table-column
                        prop="wid"
                        label="工区编号">
                    </el-table-column>
                    <el-table-column
                        prop="wname"
                        label="工区名称">
                    </el-table-column>
                    <el-table-column
                        prop="wnum"
                        label="工区人数">
                    </el-table-column>
                    <el-table-column
                        prop="sadminname"
                        label="负责人">
                    </el-table-column>
                    <el-table-column
                        prop="wstatus"
                        label="状态">
                    </el-table-column>
                    <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="handleDelete(scope.row.wid)">删除</el-button>
                    </template>
                    </el-table-column>
                </el-table>

                <!-- 存放页码及跳转 -->
                <div class="pager">
                    <el-row type="flex" class="row-bg" justify="center">
                        <!-- 设置background属性可以为分页按钮添加背景色。 -->
                        <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total"
                        :current-page="pageNum"
                        :current-size="pageSize"
                        @current-change="handlePage">
                        </el-pagination>
                    </el-row>

                    <!-- 主页按钮 -->
                    <div>
                        <el-button icon="el-icon-s-home" circle @click="goSystemHome"></el-button>
                    </div>
                </div>
            </div>
        </el-main>

    </div>
</template>
<script>
    export default{
        data() {
            return {
                dialogVisible: false,
                form: {
                    wname: '',
                    // dnum: '',
                    sadminId: '',
                    sadminname: ''
                },
                rules: {
                    wname: [
                        { required: true, message: '请输入工区名称' }
                    ],
                    // dnum: [
                    //     { required: true, message: '请输入工区人数' }
                    // ],
                    sadminname: [
                        { required: true, message: '请输入工区负责人姓名' }
                    ]
                },
                statusData: [
                    { id:1, value: '未开始', label: '未开始' },    
                    { id:2, value: '进行中', label: '进行中' },    
                    { id:3, value: '已竣工', label: '已竣工' }    
                ],
                name:'',
                wstatus: '',
                tableData: [],
                staffData:[],
                modalType: 0, // 0表示新增的弹窗， 1表示编辑
                total: 0, //当前的总条数
                pageNum: 1,
                pageSize: 10,
                workAreaForm: {
                    name: '',
                    wstatus: '',
                },
                sels: [], //当前选框选中的值
            }
        },
        methods: {
            goSystemHome(){
                this.$router.push('/systemHome')
                this.$message({
                    showClose: true,
                    message: '成功返回后台首页',
                    type: 'success'
                });
            },
            // 当负责人 id 改变时更新负责人姓名
            updateSadminName() {
                const selectedStaff = this.staffData.find(staff => staff.sid === this.form.sadminId);
                if (selectedStaff) {
                    this.form.sadminname = selectedStaff.sname;
                }
            },
            // 当负责人姓名改变时更新负责人 id
            updateSadminId() {
                const selectedStaff = this.staffData.find(staff => staff.sname === this.form.sadminname);
                if (selectedStaff) {
                    this.form.sadminId = selectedStaff.sid;
                }
            },
            resetForm() {
                this.$refs.form.resetFields();
                this.form.id=''
            },
            doSave(){
                this.$axios.post(this.$httpUrl+'/workarea/addWorkArea',this.form).then(res=>res.data).then(res=>{
                    console.log(res)
                    if(res.code==200){

                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.dialogVisible = false
                        this.loadPost()
                        this. resetForm()
                    }else{
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }

                })
            },
            doMod(){
                this.$axios.post(this.$httpUrl+'/workarea/edit',this.form).then(res=>res.data).then(res=>{
                    console.log(res)
                    if(res.code==200){

                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.dialogVisible = false
                        this.loadPost()
                        this. resetForm()
                    }else{
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }

                })
            },
            // save(){
            submit(){
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        if (this.modalType === 0) {
                            this.doSave();
                        } else {
                            this.doMod();
                        }
                    } else {
                        

                        console.log('error submit!!');
                        return false;
                    }
                });

            },
            // 弹窗关闭的时候
            handleClose() {
                this.$refs.form.resetFields()
                this.dialogVisible = false
            },
            cancel() {
                this.handleClose()
            },
            handleEdit(row) {
                this.modalType = 1
                this.dialogVisible = true
                // 注意需要对当前行数据进行深拷贝，否则会出错
                this.form = JSON.parse(JSON.stringify(row))
            },
            handleDelete(id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.$axios.get(this.$httpUrl+'/workarea/del?id='+id).then(res=>res.data).then(res=>{
                            console.log(res)
                            if(res.code==200){

                                this.$message({
                                    message: '删除成功！',
                                    type: 'success'
                                });
                                this.loadPost()
                            }else{
                                this.$message({
                                    message: '操作失败！',
                                    type: 'error'
                                });
                            }

                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });          
                });
            },
           //获取选中的值
            handleSelectionChange(sels) {
                this.sels = sels;
                console.log("选中的值",sels.map((item) => item.did));
            },
            //批量删除执行操作
            batchDelete() {
                // 删除前的提示
                this.$confirm("确认删除记录吗?", "提示", {
                    type: "warning",
                }).then(() => {
                let ids = this.sels.map((item) => item.did);
                // console.log(ids);
                // 根据后台想要的参数格式选择
                // console.log(ids.join(",")); //1,2,3,4
                console.log(ids); //[1,2,3,4]
                // 请求接口
                // deleteVehiclds({ ids: ids }).then((res) => {
                    this.$axios.post(this.$httpUrl + '/workarea/batchDelete', { ids: ids }).then((res) => {
                    if (res.data.code == "200") {
                        this.$message({
                            message: "删除成功",
                            type: "success",
                        });
                        this.loadPost()
                    }else{
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }
                });
                }).catch(error => {
                    console.error(error);
                });
            },
            handleAdd() {
                this.modalType = 0
                this.dialogVisible = true
            },
            // 获取列表的数据
            loadPost(){
                this.$axios.post(this.$httpUrl+'/workarea/getWorkArea',{
                    pageSize:this.pageSize,
                    pageNum:this.pageNum,
                    param:{
                        name:this.name,
                        wstatus: this.wstatus
                    }
                }).then(res=>res.data).then(res=>{
                    console.log(res)
                    if(res.code==200){
                        this.tableData=res.data
                        this.total=res.total
                    }else{
                        alert('获取数据失败')
                    }

                }),
                this.$axios.get(this.$httpUrl+'/staff/list').then(res=>{
                    console.log(res)
                        this.staffData=res.data

                })
            },
            // 选择页码的回调函数
            handlePage(val) {
                console.log(`当前页: ${val}`);
                this.pageNum=val
                this.loadPost()
            },
            // 列表的查询
            onSubmit() {
                this.pageNum = 1
                this.loadPost()
            },
            resetParam(){
                this.name=''
                this.wstatus=''
                this.loadPost()
            },
        },
        mounted () {
            this.loadPost()
        },
    }
    
</script>

<style lang="less" scoped>
.workarea {
    height: 90%;
    .workarea-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .common-table {
        position: relative;
        height: calc(100% - 62px);
        .pager {
            bottom: 0;
            margin-top: 20px;   
        }
    }
}
</style>